<template>
  <div>
    <div id="menu">
      <router-link to="timeline">
        <el-button type="text">动态</el-button>
      </router-link>
      <el-divider direction="vertical" content-position="center"></el-divider>
      <router-link to="loop">
        <el-button type="text">轮播</el-button>
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "menu",
  mounted() {
    this.$router.push({name: 'timeline'})
  },
  data() {  },
}
</script>

<style scoped>
#menu {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-button {
  font-size: 25px;
  padding: 7px 10px;
}

.router-link-active {
  background-color: rgb(64, 157, 253) !important;
  border-radius: 5px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .3);
}

.router-link-active button {
  color: white !important;
}

#menu .el-divider {
  margin-top: 10px;
}
</style>